<template>
	<view class="content">
		<view class="myAnser-page-header">
			<mynavBar :title="title" :bgcolor="bgColor" :gps="gps"></mynavBar>
		</view>
		<view class="myAnswer-page-content">
			<!-- 头部选项卡部分 -->
			<view class="freequestion-content-header">
				<view class="content-header-title" @click="headerindextwo(0)"
					:class="headertwo==0?'content-header-titleactives':''">
					<span class="header-title-text">悬赏邀请</span>
				</view>
				<view class="content-header-title" @click="headerindextwo(1)"
					:class="headertwo==1?'content-header-titleactives':''">
					<span class="header-title-text">随机邀请</span>
				</view>
			</view>

			<view class="myAnswer-page-list">
				<view v-for="(item,index) in answerList" :key="index" class="content-body-list" v-if="headertwo==0"
					@click="gotoAnswer(item)">
					<img :src="queryIconImage(`myquestionlogo1`)" alt="" class="body-list-img"
						v-if="item?.article?.answer_type=='公开参与'">
					<img :src="queryIconImage(`myquestionlogo2`)" alt="" class="body-list-img"
						v-if="item?.article?.answer_type=='答主参与'">
					<view class="content-body-listCenter">
						<view class="content-body-question">
							提问:&nbsp;{{item.article.title}}
						</view>
						<view class="content-body-userInfo">
							<!-- 回答:&nbsp;{{item.content}} -->
							<img :src="item?.article?.user?.avatar?.url" alt="" class="content-body-userInfo-avatar">
							<view class="content-body-userInfo-nickname">
								{{item?.article?.user?.nickname}}&nbsp;
							</view>
							<view class="content-body-userInfo-public">
								&nbsp;邀请您回答
							</view>
						</view>
						<view class="content-body-price">
							指定悬赏{{item?.article?.price_cny/100}}元
						</view>
						<view class="content-body-time">
							{{item.created_at}}
						</view>
					</view>

					<view class="content-body-rightBtn">
						<button class="content-body-btn" @click="gotoAnswer(item)">写回答</button>
					</view>

				</view>

				<view v-for="(item,index) in notAnswerList" :key="index" class="content-body-list" v-else>
					<img :src="queryIconImage(`myquestionlogo1`)" alt="" class="body-list-img">
					<view class="content-body-listCenter">
						<view class="content-body-question">
							提问:&nbsp;{{item.article.title}}
						</view>
						<view class="content-body-userInfo">
							<!-- 回答:&nbsp;{{item.content}} -->
							<img :src="item?.article?.user?.avatar?.url" alt="" class="content-body-userInfo-avatar">
							<view class="content-body-userInfo-nickname">
								{{item?.article?.user?.nickname}}&nbsp;
							</view>
							<view class="content-body-userInfo-public" v-if="item?.article?.answer_type=='公开参与'">
								&nbsp;的公开悬赏提问
							</view>
							<view class="content-body-userInfo-noPublic" v-if="item?.article?.answer_type=='答主参与'">
								&nbsp;邀请你回答
							</view>
						</view>

						<view class="content-body-price">
							公开悬赏{{item?.article?.price_cny/100}}元
						</view>
						<view class="content-body-time">
							{{item.created_at}}
						</view>
					</view>

					<view class="content-body-rightBtn">
						<button class="content-body-btn" @click="gotoAnswer(item)">写回答</button>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mynavBar from '@/components/mynavBar/mynavBar.vue'
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		components: {
			mynavBar
		},
		data() {
			return {
				title: '等你回答',
				gps: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				headertwo: 0,
				userInfo: {},
				answerList: [],
				notAnswerList: [],
				windowHeight: 0

			};
		},
		onLoad: function(option) {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top + ''
			console.log("胶囊位置信息", arr);
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			console.log(this.windowHeight);
			this.userInfo = uni.getStorageSync('userInfo')
			this.getData1()
			//#endif
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		methods: {
			gotoAnswer(item) {
				console.log("点击了", item);
				uni.navigateTo({
					url: '/pages_a/questiondetails/questiondetails?id=' + item.article.id
				})
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},


			//排序
			bubbleSort(list) {
				var len = list.length
				for (let i = 0; i < len; i++) {
					for (let j = 0; j < len - 1 - i; j++) {
						if (list[j].id < list[j + 1]
							.id) {
							var t = list[j + 1]
							list[j + 1] = list[j]
							list[j] = t
						}
					}
				}
				return list
			},

			getData1() {
				this.$store.dispatch('remote/query', {
					model: 'article_answer',
					where: {
						status: {
							_eq: "待回答"
						}
					},
					order_by: {
						id: "desc"
					},
					field_string: `id created_at user_user article_article price article{id title status answer_type type price_cny user{id nickname avatar{id url}}}`
				}).then(res => {
					let add = JSON.parse(JSON.stringify(res.data_list)),
						list = []
					add = add.map(v => {
						v.created_at = Time(v.created_at)
						return v
					})
					for (let i in add) {
						if (add[i].user_user == this.userInfo.id && add[i].article.status == "展示中") {
							this.answerList.push(add[i])
						} else if (add[i].user_user == null && this.notAnswerList.length == 0 && add[i].article
							.status == "展示中") {
							this.notAnswerList.push(add[i])
						} else if (add[i].user_user == null && this.notAnswerList.length != 0 && add[i].article
							.status == "展示中") {

							for (let j in this.notAnswerList) {
								if (this.notAnswerList[j].article_article != add[i].article_article) {
									this.notAnswerList.push(add[i])
								}
							}

						}
					}
					console.log(this.notAnswerList);

				})
			},
			//获取文章信息
			async getArticle(id) {
				this.$store.dispatch('remote/query', {
					model: 'article',
					where: {
						id: {
							_eq: id
						}
					},
					field_string: `id user_user type title created_at`
				}).then(res => {
					return res.data
				})
			},
			/* 头部选择框事件 */
			headerindexone(val) {
				this.headerone = val

			},
			headerindextwo(val) {
				this.headertwo = val

			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;

		.myAnser-page-header {
			width: 100%;
			/* #ifdef MP-WEIXIN */
			height: 343rpx;
			/* #endif */
			/* #ifdef H5 */
			height: 260rpx;
			/* #endif */
		}

		.myAnswer-page-content {
			width: 100%;
			height: 100%;
			margin-top: -170rpx;

			.freequestion-content-header {
				width: 750rpx;
				height: 80rpx;
				background: #EEEEEE;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				overflow: hidden;
				display: flex;
				box-shadow: 0px -10rpx 10rpx 0px rgba(0, 0, 0, 0.1);

				.content-header-title {
					width: 50%;
					height: 80rpx;
					text-align: center;

					.header-title-text {
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #666666;
						line-height: 80rpx;
					}
				}

				.content-header-titleactives {
					background: #F09500;

					.header-title-text {
						color: #fff;
						border-bottom: 4rpx solid #fff;
					}
				}
			}

			.myAnswer-page-list {
				flex: 1;
				background-color: #fff;
				overflow: hidden;
				overflow-y: auto;
				width: 100%;
				box-sizing: border-box;
				padding: 0 25rpx 0 30rpx;

				.content-body-list {
					width: 100%;
					height: 220rpx;
					box-sizing: border-box;
					border-bottom: 2rpx dashed #ccc;
					padding: 30rpx 10rpx 10rpx 10rpx;
					display: flex;
					align-items: center;

					.body-list-img {
						width: 39rpx;
						margin-right: 8rpx;
						height: 36rpx;
					}

					.content-body-listCenter {
						padding-left: 5px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						width: 75%;
						height: 95%;

						.content-body-time {

							color: #999999;
							font-size: 24rpx;
						}

						.content-body-price {
							color: #F09500;
							font-weight: bold;
							font-size: 24rpx;
						}

						.content-body-question {
							width: 440rpx;
							color: #5F5F5F;
							font-size: 30rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.content-body-userInfo {
							display: flex;
							// justify-content: center;
							align-items: center;

							.content-body-userInfo-avatar {
								height: 50rpx;
								width: 50rpx;
								border-radius: 100%;
							}

							.content-body-userInfo-nickname {
								margin-left: 5px;
								color: #567895;
								font-family: 思源黑体;
								font-size: 26rpx;
								font-weight: bold;
								letter-spacing: -0.6px;
							}

							.content-body-userInfo-public {
								font-family: 思源黑体;
								letter-spacing: -0.6px;
								font-size: 20rpx;
								color: #9E9E9E;
							}

							.content-body-userInfo-noPublic {
								font-family: 思源黑体;
								letter-spacing: -0.6px;
								font-size: 20rpx;
								color: #9E9E9E;
							}
						}

						.content-body-answer {

							color: #5F5F5F;
							font-size: 30rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}

					.content-body-listRight {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #F09500;
						height: 95%;
						width: 20%;
						font-size: 24rpx;
					}

					.content-body-listRight-noPublic {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #999999;
						height: 95%;
						width: 20%;
						font-size: 24rpx;
					}

					.content-body-rightBtn {


						.content-body-btn {
							font-size: 28rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50px;
							background: #F09500;
							color: #ffffff;
							height: 60rpx;
							width: 150rpx;
						}
					}
				}
			}
		}

	}
</style>